import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';

const VideoPlayer: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  return (
    <div className="video-player-container">
      <div className="page-header">
        <button
          className="back-button"
          onClick={() => navigate('/')}
        >
          返回首页
        </button>
        <h2>视频播放器</h2>
      </div>
      <div className="video-player">
        <p>正在播放视频 ID: {id}</p>
        {/* 这里后续可以添加实际的视频播放器组件 */}
      </div>
    </div>
  );
};

export default VideoPlayer;